<!--
year-fault
年度故障统计（驾驶舱部分）
-->
<template>
    <div class="year-fault">
        <chart
        chartId="yearChart"
        :options="yearOptions"></chart>
        <div class="year-border"></div>
    </div>
</template>

<script>
import {
    getYearFaultStatic,
} from '@/apis';
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'year-fault',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    computed: {
        // 图表配置
        yearOptions() {
            const {
                size01,
            } = this;
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    textStyle: {
                        fontSize: 14 * size01,
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '5%',
                    top: '4%',
                    containLabel: true,
                    show: true,
                    backgroundColor: 'transparent',
                    borderColor: 'rgba(255, 255, 255, .3)',
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    position: 'top',
                    axisLabel: {
                        fontSize: 12 * size01,
                        color: 'rgba(255, 255, 255, .3)',
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: 'rgba(255, 255, 255, .3)',
                        },
                    },
                },
                yAxis: {
                    type: 'category',
                    data: this.xData, // ['Brazil', 'Indonesia', 'USA', 'India'],
                    axisTick: {
                        show: false,

                    },
                    axisLabel: {
                        fontSize: 14 * size01,
                        color: '#fff',
                    },

                    axisLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: '故障件',
                        type: 'bar',
                        data: this.yData, // [20, 30, 40, 50],
                        barWidth: 14 * size01,
                        itemStyle: {
                            borderRadius: [0, 15 * size01, 15 * size01, 0],
                            color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                { offset: 0, color: '#3294FF' },
                                { offset: 1, color: 'rgba(23,91,255,0.18)' },
                            ]),
                        },
                    },
                ],
            };
        },
    },
    data() {
        return {
            xData: [], // x轴数据
            yData: [], // y轴数据
        };
    },
    methods: {
        // 获取年度故障统计
        getYearStatic() {
            getYearFaultStatic().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.xData = data.map((item) => item.deptName).reverse();
                    this.yData = data.map((item) => item.deptCount).reverse();
                }
            }).catch((err) => {
                window.console.log('获取年度故障统计', err);
            });
        },
    },
    created() {
        this.getYearStatic();
    },
};
</script>
<style lang='scss'>
.year-fault {
    position: absolute;
    // width: 9rem;
    // height: 3.2rem;
    width: 100%;
    height: 90%;
    top: 31%;
    left: 0;
    transform: rotateY(360deg) rotateZ(8deg);
    transform-origin: 60% 12%;

}

</style>
